<script setup>
import { nextTick, ref, onMounted, onBeforeMount, computed } from 'vue';
import { useUserStore } from "@/store/user";

import { onBeforeRouteLeave } from 'vue-router';
import { useRouter, useRoute } from 'vue-router';
import { getChatMessageListApi, getMassageChatListApi } from "@/apis/message";
import { deleteUnreadChatMessageApi } from "@/apis/chat";

const router = useRouter();
const route = useRoute();
const userStore = useUserStore();



/* 要传递给子组件的对象 */
const selectedChatObject = ref(null);


/* 选中聊天,发送请求获得聊天信息 */
async function selectChat(id, number) {

  /* 消除未读信息 */
  if (id !== undefined && id !== null && typeof id === 'number' && number !== 0) {
    await deleteUnreadChatMessageApi(userStore.userInfo.id, id, number);

    /* 再次获取聊天列表,消除小红点 */
    await getChatList()

    /* 获得所有的未读信息,消除数量 */
    await userStore.getUnreadMessage()
  }

  /* 跳转到聊天 */
  router.push('/message/chat/' + id)

  nextTick(() => {

    selectedChatObject.value = list.value.records.find(item => item.receiveId === Number(id));
    if (selectedChatObject.value) {
      getMessageList(selectedChatObject.value.receiveId);

    }
  })




}

// #region 获取聊天记录
/* 消息列表 */
const messageList = ref([]);

// 获取聊天记录
const getMessageList = async (receiveId) => {

  // 使用 props.selectedChatObject.receiveId 获取特定用户的聊天记录
  const res = await getChatMessageListApi(userStore.userInfo.id, receiveId);
  messageList.value = res.data || []; // 避免 undefined

}


// #endregion


/* 获取私聊列表 */
const list = ref([]);
const getChatList = async () => {
  const res = await getMassageChatListApi(userStore.userInfo.id)
  list.value = res
}



// #region messageList数组的代码
/* 添加消息 */
const addMessage = (message) => {
  messageList.value.push(message);
}

/* 删除消息 */
const deleteMessage = () => {
  messageList.value.pop();
}
// #endregion


onMounted(async () => {
  /* 接收人id */
  const id = route.path.split('/')[3];

  /* 获取聊天列表 */
  await getChatList()

  /* 选中聊天 */
  await selectChat(id)

})


// #region 判断当前是否是手机端和是否没有选中聊天
//这是手机端
const isPhone = computed(() => {
  return window.innerWidth <= 768
})


/* 这是没选中聊天 */
const isNoChatSelected = computed(() => {
  return route.path.split('/')[3] === 'undefined'
})

// #endregion


</script>





<template>
  <div id="chat-app">



    <!-- 这是电脑端的聊天页面 -->
    <template v-if="!isPhone">
      <!-- 左侧选择框 -->
      <div class="sidebar">
        <h2>选择聊天对象</h2>
        <ul>
          <!-- {{ list }} -->
          <li v-for="item in list.records" :key="item.id" @click="selectChat(item.receiveId, item.unreadNumber)">
            <el-badge :value="item.unreadNumber" :offset="[-7, 0]" :hidden="item.unreadNumber === 0">
              <img :src="item.receiveAvatar || 'https://via.placeholder.com/40'" alt="avatar" />
            </el-badge>
            <div>
              <h3>{{ item.receiveUserName }}</h3>
              <!-- <p>{{ "最新消息" }}</p> -->
            </div>
          </li>
        </ul>
      </div>
      <router-view v-if="list !== null && list.records !== null" :messageList="messageList"
        :selectedChatObject="selectedChatObject" :addMessage="addMessage" :deleteMessage="deleteMessage"
        :getChatList="getChatList"></router-view>
    </template>

    <!-- 这是手机端的聊天页面 -->
    <template v-else>
      <!-- 左侧选择框 -->
      <div class="sidebar" v-if="isNoChatSelected">
        <h2>选择聊天对象</h2>
        <ul>
          <el-scrollbar height="400px">
            <li v-for="item in list.records" :key="item.id" @click="selectChat(item.receiveId, item.unreadNumber)">
              <el-badge :value="item.unreadNumber" :offset="[-10, 4]" :hidden="item.unreadNumber === 0">
                <img :src="item.receiveAvatar || 'https://via.placeholder.com/40'" alt="avatar" />
              </el-badge>
              <div>
                <h3>{{ item.receiveUserName }}</h3>
                <!-- <p>{{ "最新消息" }}</p> -->
              </div>
            </li>
          </el-scrollbar>
        </ul>
      </div>

      <router-view v-else :messageList="messageList" :selectedChatObject="selectedChatObject" :addMessage="addMessage"
        :deleteMessage="deleteMessage" :getChatList="getChatList">
      </router-view>
    </template>



  </div>
</template>

<style scoped>
/* 电脑端样式 */
@media screen and (min-width: 768px) {
  #chat-app {
    display: flex;
    height: 70vh;
    /* width: 68vw; */
    overflow: hidden;
    border: 1px solid rgb(81, 80, 80);
  }

  .sidebar {
    width: 250px;
    border-right: 1px solid #ccc;
    padding: 10px;
    background-color: #f9f9f9;
  }

  .sidebar h2 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .sidebar ul {
    list-style: none;
    padding: 0;
  }

  .sidebar li {
    display: flex;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
  }

  .sidebar li:hover {
    background-color: #e2e2e2;
  }

  .sidebar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .sidebar p {
    color: #999;
  }



}

/* 手机端样式 */
@media screen and (max-width: 768px) {
  #chat-app {
    display: flex;
    height: 70vh;
    /* height: 100%; */
    /* width: 100vw; */
    overflow: hidden;
    /* border: 1px solid rgb(81, 80, 80); */
  }

  .sidebar {
    width: 100%;
    border-right: 1px solid #ccc;
    padding: 10px;
    /* background-color: #f9f9f9; */
  }

  .sidebar h2 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .sidebar ul {
    list-style: none;
    padding: 0;
  }

  .sidebar li {
    display: flex;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
  }

  .sidebar li:hover {
    background-color: #e2e2e2;
  }

  .sidebar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .sidebar p {
    color: #999;
  }



}
</style>
